<template>
	<view class="padding-rpx_25">
		<view class="bgColor_ffffff padding-rpx_25 flex_column_c_c border-radius-rpx_10" style="mix-height: 500rpx;">
			<QS-Button theme="primary" @click="navigateTo('template.home_1')">查看进阶示例(模板home-1)</QS-Button>
			<QS-P height="60rpx"></QS-P>
			<text class="QS-text mini color_808080">根据json渲染ui的组件目前支持类型有QS-Grids、QS-P、QS-Button、view、image、text</text>
		</view>
		<QS-P height="20rpx"></QS-P>
		<view class="bgColor_ffffff padding-rpx_25 border-radius-rpx_10">
			<view class="flex_row_c_c">
				<text class="QS-text">简易示例</text>
			</view>
			<QS-P height="25rpx"></QS-P>
			<QS-SuperComponent :res="res" @click="click"></QS-SuperComponent>
			<QS-P height="25rpx"></QS-P>
			<view class="flex_row_c_c">
				<text class="QS-text">json数据</text>
			</view>
			<text style="font-size: 24rpx;color:#808080;">{{JSON.stringify(res, null, 4)}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: {
					elements: [
						{
							type: 'view',
							attributes: {
								compStyle: 'height: 150rpx;background-color: #55aaff;border-radius: 10rpx',
								compClass: 'flex_row_c_c'
							},
							res: {
								elements: [
									{
										type: 'text',
										attributes: {
											compStyle: 'color: #ffffff;font-size: 28rpx;'
										},
										text: '我是QS-SuperComponent组件'
									}
								]
							}
						}
					]
				}
			}
		},
		methods: {
			click(e) {
				uni.$qs.modal(`${e.type}类型被点击了`)
			}
		}
	}
</script>

<style scoped>
	
</style>
